<template>
<div class="juheh5-login">
    <div class="account-header">
        <div v-if="canBackHome" class="back-icon" @click="handleBackClick">
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        账号登录
    </div>
    <div class="login-header">
        <div class="login-tab">
            <div v-for="item in loginTabList" class="tab-item" :class="{ active: item.active }" @click="handleTabClick(item)">{{ item.name }}</div>
        </div>
    </div>
    <div class="account-content">
        <template v-if="curTab === 'PHONE_CODE_LOGIN'">
            <div class="phone-login-box">
                <input class="custom-input large" type="text" v-model="phone" placeholder="请输入手机号码">
                <div class="phone-code-box">
                    <input class="custom-input code-size" type="text" v-model="code" placeholder="请输入验证码" autocomplete="one-time-code" maxlength="6">
                    <div class="code-btn" :class="{ disabled: isForbid }" @click="handleGetPhoneCodeClick">{{ isForbid ? '已发送 ' + count : '获取验证码' }}</div>
                </div>
                <div class="large-btn login-margin" @click="handlePhoneCodeLoginClick">登录</div>
                <div class="user-agree">
                    <input type="checkbox" v-model="isPrivacyAgree" class="checkbox">我已阅读并同意<label class="info" @click="handlePasswordPrivacyUrlClick">《用户协议与隐私政策》</label>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="password-login-box">
                <input class="custom-input large" type="text" v-model="account" placeholder="请输入账号/手机">
                <div class="password-input-box">
                    <input ref="passwordInput" class="custom-input large with-eye" type="password" v-model="password" placeholder="请输入密码">
                    <div class="password-eye" @click="handlePasswordEyeClick">
                        <template v-if="passwordEyeOpen">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                <path
                                    d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                            </svg>
                        </template>
                        <template v-else>
                            <svg class="bi-eye-close" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 55.02">
                                <path
                                    d="M82.672,16.696C75.019,27.1,62.962,33.247,50.005,33.247c-12.966,0-25.032-6.149-32.681-16.551h-5.213l0.431,0.652 c8.346,12.646,22.352,20.195,37.462,20.195c15.107,0,29.11-7.549,37.454-20.198l0.43-0.649H82.672z">
                                </path>
                                <path d="M48.378,37.26v11h4v-11H48.378z"></path>
                                <path d="M63.877,34.419l4.684,11.035l3.682-1.563l-4.684-11.035L63.877,34.419z"></path>
                                <path d="M76.975,27.423l7.325,9.375l3.152-2.463l-7.325-9.375L76.975,27.423z"></path>
                                <path d="M32.877,32.798l-4.202,11.546l3.759,1.368l4.202-11.546L32.877,32.798z"></path>
                                <path d="M20.477,25.273l-7.373,9.437l3.152,2.463l7.373-9.437L20.477,25.273z"></path>
                            </svg>
                        </template>
                    </div>
                </div>
                <div class="large-btn login-margin" @click="handlePasswordLoginClick">登录</div>
                <div class="user-agree">
                    <input type="checkbox" v-model="isPrivacyAgree" class="checkbox">我已阅读并同意<label class="info" @click="handlePasswordPrivacyUrlClick">《用户协议与隐私政策》</label>
                </div>
            </div>
        </template>
        <div class="reg-type-box">
            <div v-if="false" class="code-reg-btn" @click="handlePhoneRegClick">
                <div class="code-add-icon">
                    <svg t="1708681278939" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10435">
                        <path d="M777 110.382C777 102.991 771.009 97 763.618 97H292.382C284.991 97 279 102.991 279 110.382v802.236c0 7.391 5.991 13.382 13.382 13.382h471.236c7.391 0 13.382-5.991 13.382-13.382V110.382zM498.03 131h143.857c8.315 0 15.055 6.685 15.055 15s-6.74 15-15.055 15H498.03c-8.315 0-15.055-6.685-15.055-15s6.74-15 15.055-15z m-60.219 1.583c8.315 0 15.055 6.74 15.055 15.055s-6.74 15.055-15.055 15.055-15.055-6.74-15.055-15.055 6.74-15.055 15.055-15.055z m89.91 771.98c-25.406 0-46.001-20.595-46.001-46.001s20.595-46.001 46.001-46.001 46.001 20.595 46.001 46.001c0 25.405-20.595 46.001-46.001 46.001zM731 788H323V206h408v582z" fill="#53AFFD" p-id="10436"></path><path d="M810 110.837C810 84.97 789.03 64 763.163 64H291.837C265.97 64 245 84.97 245 110.837v802.325C245 939.03 265.97 960 291.837 960h471.325C789.03 960 810 939.03 810 913.163V110.837z m-33 801.781c0 7.391-5.991 13.382-13.382 13.382H292.382c-7.391 0-13.382-5.991-13.382-13.382V110.382C279 102.991 284.991 97 292.382 97h471.236c7.391 0 13.382 5.991 13.382 13.382v802.236z" fill="" p-id="10437"></path><path d="M323 206h408v582H323z" fill="#FFFFFF" p-id="10438"></path><path d="M527.721 858.562m-46.001 0a46.001 46.001 0 1 0 92.002 0 46.001 46.001 0 1 0-92.002 0Z" fill="#FFFFFF" p-id="10439"></path><path d="M437.811 147.638m-15.055 0a15.055 15.055 0 1 0 30.11 0 15.055 15.055 0 1 0-30.11 0Z" fill="#FFFFFF" p-id="10440"></path><path d="M498.03 161h143.857c8.315 0 15.055-6.685 15.055-15s-6.74-15-15.055-15H498.03c-8.315 0-15.055 6.685-15.055 15s6.74 15 15.055 15z" fill="#FFFFFF" p-id="10441"></path>
                    </svg>
                </div>
                <div class="code-reg-text">手机注册</div>
            </div>
            <div class="password-reg-btn" @click="handleAccountRegClick">
                <div class="passowrd-reg-text">手动注册</div>
            </div>
            <div class="password-reg-btn" @click="handleRetrievePasswordClick">
                <div class="passowrd-reg-text">找回密码</div>
            </div>
            <div class="password-reg-btn" @click="handleFastRegClick">
                <div class="passowrd-reg-text">一键注册</div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';

export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            curTab: this.modelValue.currentComponentTab,
            loginTabList: [
                { 'name': '密码登录', 'value': 'PASSWORD_LOGIN', 'active': true },
                // { 'name': '验证码登录', 'value': 'PHONE_CODE_LOGIN', 'active': false },
            ],
            phone: '',
            code: '',
            account: '',
            password: '',
            isPrivacyAgree: false,
            passwordEyeOpen: false,
            count: 0,
            canBackHome: 0,
        };
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
                this.curTab = newVal.currentComponentTab;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
        curTab: {
            immediate: true,
            handler(newVal) {
                this.loginTabList.forEach(item => {
                    item.active = false;
                    if (newVal === item.value) {
                        item.active = true;
                    }
                });
            },
        }
    },
    computed: {
        isForbid() {
            return this.count !== 0;
        }
    },
    mounted() {
        let account_info = JSON.parse(localStorage.getItem('account_info')) || []
        if (account_info.length > 0) {
            this.canBackHome = 1
        }
    },
    methods: {
        handleTabClick(item) {
            this.loginTabList.map(e => e.active = false);
            item.active = true;
            this.curTab = item.value;
        },
        handleCodePrivacyUrlClick() {
            this.myValue.currentComponent = 'Privacy';
            this.myValue.currentComponentTab = '';
            this.myValue.lastComponent = 'Login';
            this.myValue.lastComponentTab = 'PHONE_CODE_LOGIN';
        },
        handlePasswordPrivacyUrlClick() {
            this.myValue.currentComponent = 'Privacy';
            this.myValue.currentComponentTab = '';
            this.myValue.lastComponent = 'Login';
            this.myValue.lastComponentTab = 'PASSWORD_LOGIN';
        },
        handleBackClick() {
            this.myValue.currentComponent = 'AccountSelectLogin';
            this.myValue.currentComponentTab = '';
        },
        handleGetPhoneCodeClick() {
            if (this.isForbid) {
                return false;
            }

            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            axios.get('/api/phone_code/get', { params: { type: 2, phone: this.phone } }).then(res => {
                let data = res.data;
                if (res.data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                layer.msg('短信已发送成功，请注意查看手机', { time: 1000 });
                this.countDown(60);
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handlePhoneCodeLoginClick() {
            if (this.phone === '') {
                layer.msg('请输入手机号码', { time: 1000 });
                return false;
            }

            if (this.code === '') {
                layer.msg('请输入验证码', { time: 1000 });
                return false;
            }

            if (!this.phoneVerify(this.phone)) {
                layer.msg('手机号码格式错误', { time: 1000 });
                return false;
            }

            if (this.isPhoneCodeAgree === false) {
                layer.msg('请勾选用户隐私协议方可继续', { time: 1000 });
                return false;
            }

            axios.post('/api/juheh5/account/phone_login', {
                phone: this.phone,
                code: this.code,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (res.data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                let info = data.data;
                let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                localAccountInfo.forEach((item, index) => {
                    if (item.account === info.account) {
                        localAccountInfo.splice(index, 1);
                    }
                });
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                juheh5Service.loginCb(info)
                return
            }).catch((error) => {
                layer.msg(error, { time: 1000 });
            });

            return false;
        },
        handlePasswordEyeClick() {
            this.passwordEyeOpen = !this.passwordEyeOpen;
            if (this.passwordEyeOpen) {
                this.$refs.passwordInput.type = 'text';
            } else {
                this.$refs.passwordInput.type = 'password';
            }
        },
        checkPrivacyAgree() {
            if (this.isPrivacyAgree === false) {
                layer.msg('请先确认《用户协议与隐私政策》', { time: 1000 });
                return false;
            }

            return true;
        },
        handlePasswordLoginClick() {
            if (this.account === '') {
                layer.msg('请输入账号', { time: 1000 });
                return false;
            }

            if (this.password === '') {
                layer.msg('请输入密码', { time: 1000 });
                return false;
            }

            if (this.checkPrivacyAgree() === false) {
                return false;
            }

            axios.post('/api/juheh5/account/account_login', {
                account: this.account,
                password: this.password,
                game_id: this.myValue.gameId
            }).then(res => {
                let data = res.data;
                if (data.code != 0) {
                    layer.msg(data.msg, { time: 1000 });
                    return false;
                }

                let info = data.data;
                let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                localAccountInfo.forEach((item, index) => {
                    if (item.account === info.account) {
                        localAccountInfo.splice(index, 1);
                    }
                });
                localAccountInfo.unshift(info);
                localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                juheh5Service.loginCb(info)
                return
            }).catch((error) => {
                layer.msg('异常错误', { time: 1000 });
            });

            return false;
        },
        handleRetrievePasswordClick() {
            this.myValue.currentComponent = 'RetrievePassword';
            this.myValue.currentComponentTab = '';
        },
        handleAccountRegClick() {
            if (this.checkPrivacyAgree() === false) {
                return false;
            }

            this.myValue.currentComponent = 'AccountReg';
            this.myValue.currentComponentTab = '';
        },
        handleFastRegClick() {
            if (this.checkPrivacyAgree() === false) {
                return false;
            }

            this.myValue.currentComponent = 'FastReg';
            this.myValue.currentComponentTab = '';
        },
        handlePhoneRegClick() {
            this.myValue.currentComponent = 'PhoneReg';
            this.myValue.currentComponentTab = '';
        },
        handleFastRegClick() {
            this.myValue.currentComponent = 'FastReg';
            this.myValue.currentComponentTab = '';
            this.myValue.generateAccount = true;
        },
        phoneVerify(phone) {
            const pattern = /^1[3456789]\d{9}$/;
            return pattern.test(phone);
        },
        countDown(seconds) {
            this.count = seconds;
            const updateCountdown = () => {
                this.count--;
                if (this.count > 0) {
                    setTimeout(updateCountdown, 1000);
                }
            }

            updateCountdown();
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>

<style lang="scss" scoped>
.layui-input-block {
    margin-top: 3px;
    margin-left: 0px !important;
}

.disabled {
    border-color: #eee !important;
    background-color: #fbfbfb !important;
    color: #d2d2d2 !important;
    cursor: not-allowed !important;
    opacity: 1;
}
</style>
